@import '../../resources/css/default-page.less';

page{
  width: 100%;
  min-height: 100%;
  background: #f6f6f6;
}
.group-det-cont{
  & .group-top-cont{
    background: #fff;
    padding: 0 30rpx 30rpx;
    & .link-to-index{
      padding-left: 9rpx;
      position: fixed;
      z-index: 100;
      right: 0;
      top: 150rpx;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      padding-right: 20rpx;
      border-radius: 40rpx 0 0 40rpx;
      align-items: center;
      & .link-icon-cont{
        width: 62rpx;
        height: 62rpx;
        border-radius: 50%;
        background: #fff;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        &>image{
          width: 40rpx;
          height: 40rpx;
        }
      }
      & .link-words{
        margin-left: 14rpx;
        flex-shrink: 0;
        color: #fff;
        font-size: 28rpx;
        line-height: 30rpx;
        &>text{
          display: block;
        }
      }
    }
    // 当前用户已参团
    & .cur-user-joined{
      // 倒计时模块
      & .count-timer-cont{
        padding-top: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        & .timer-tips{
          color: #666;
          margin-right: 25rpx;
          font-size: 28rpx;
        }
        & .timer{
          display: flex;
          flex-shrink: 0;
          align-items: center;
          & .timer-num{
            color: #fff;
            font-size: 30rpx;
            border-radius: 5rpx;
            text-align: center;
            line-height: 50rpx;
            width: 50rpx;
            height: 50rpx;
          }
          & .timer-skin{
            font-size: 46rpx;
            padding: 0px 10rpx;
          }
          &.overtime{
            & .timer-num{
              background: #C0C0C0;
            }
            & .timer-skin{
              color: #C0C0C0;
            }
          }
        }
      }
      & .pay-suc-tips{
        padding-top: 40rpx;
        text-align: center;
        color: #333;
        font-size: 30rpx;
        font-weight: 600;
      }
      // 队员模块，未满员
      & .member-pic-cont{
        display: flex;
        padding-top: 40rpx;
        justify-content: center;
        & .member-item{
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          position: relative;
          background: #fff6f6;
          border: 1px dashed #ffbdbd;
          margin: 0 50rpx;
          &.no-border{
            border: none;
          }
          & .item-icon-inner{
            color: #ffbdbd;
            position: absolute;
            z-index: 1;
            font-size: 50rpx;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &>image{
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 10;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
          }
          & .group-role{
            background: #FF2424;
            color: #fff;
            font-size: 26rpx;
            height: 34rpx;
            display: block;
            width: 56rpx;
            text-align: center;
            line-height: 34rpx;
            padding: 0 14rpx;
            border-radius: 17rpx;
            position: absolute;
            z-index: 11;
            bottom: -10rpx;
            left: 50%;
            transform: translate(-50%);
          }
          &.overtime{
            background: #f3f3f3;
            border-color: #dfdfdf;
            & .item-icon-inner{
              color: #9a9a9a;
            }
          }
        }
      }
      // 过期提示
      & .over-time-tips{
        padding-top: 40rpx;
        text-align: center;
        font-size: 28rpx;
        color: #DC4B4B;
        line-height: 1.5;
      }
      // 邀请按钮
      & .invite-btn-cont{
        padding-top: 50rpx;
        &>.invite-btn{
          height: 90rpx;
          border-radius: 10rpx;
          color: #fff;
          line-height: 90rpx;
          font-size: 36rpx;
        }
      }
      // 拼团成功模块
      & .group-success-cont{
        & .member-suc-cont{
          display: flex;
          padding-top: 40rpx;
          justify-content: center;
          & .member-item{
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            position: relative;
            background: #fff6f6;
            border: 2px solid #fff;
            &>image{
              border-radius: 50%;
              overflow: hidden;
              width: 100%;
              height: 100%;
              position: absolute;
              z-index: 10;
              left: 0px;
              right: 0px;
              top: 0px;
              bottom: 0px;
            }
            & .group-role{
              background: #FF2424;
              color: #fff;
              font-size: 26rpx;
              height: 34rpx;
              display: block;
              width: 56rpx;
              text-align: center;
              line-height: 34rpx;
              padding: 0 14rpx;
              border-radius: 17rpx;
              position: absolute;
              z-index: 11;
              bottom: -10rpx;
              left: 50%;
              transform: translate(-50%);
            }
            &:last-child{
              position: relative;
              z-index: 10;
              margin-left: -20rpx;
            }
          }
        }
        & .member-full-title{
          text-align: center;
          font-size: 30rpx;
          font-weight: 600;
          margin-top: 40rpx;
          height: 88rpx;
          width: 345rpx;
          margin: 40rpx auto 0;
          padding-top: 12rpx;
          color: #FA5523;
          background-repeat: no-repeat center;
          background-position: center;
          background-size: cover;
        }
      }
      & .member-full-tips{
        text-align: center;
        padding-top: 40rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
    // 当前用户未参团
    & .cur-user-no-join{
      // 倒计时模块
      & .count-timer-cont{
        padding-top: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        & .timer-tips{
          color: #666;
          margin-right: 25rpx;
          font-size: 28rpx;
        }
        & .timer{
          display: flex;
          flex-shrink: 0;
          align-items: center;
          & .timer-num{
            color: #fff;
            font-size: 30rpx;
            border-radius: 5rpx;
            text-align: center;
            line-height: 50rpx;
            width: 50rpx;
            height: 50rpx;
          }
          & .timer-skin{
            font-size: 46rpx;
            padding: 0px 10rpx;
          }
          &.overtime{
            & .timer-num{
              background: #C0C0C0;
            }
            & .timer-skin{
              color: #C0C0C0;
            }
          }
        }
      }
      // 队员模块，未满员
      & .member-pic-cont{
        display: flex;
        padding-top: 40rpx;
        justify-content: center;
        & .member-item{
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          position: relative;
          background: #fff6f6;
          border: 1px dashed #ffbdbd;
          margin: 0 50rpx;
          &.no-border{
            border: none;
          }
          & .item-icon-inner{
            color: #ffbdbd;
            position: absolute;
            z-index: 1;
            font-size: 50rpx;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          &>image{
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 10;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
          }
          & .group-role{
            background: #FF2424;
            color: #fff;
            font-size: 26rpx;
            height: 34rpx;
            display: block;
            width: 56rpx;
            text-align: center;
            line-height: 34rpx;
            padding: 0 14rpx;
            border-radius: 17rpx;
            position: absolute;
            z-index: 11;
            bottom: -10rpx;
            left: 50%;
            transform: translate(-50%);
          }
          &.overtime{
            background: #f3f3f3;
            border-color: #dfdfdf;
            & .item-icon-inner{
              color: #9a9a9a;
            }
          }
        }
      }
      // 拼团成功模块
      & .group-success-cont{
        & .member-suc-cont{
          display: flex;
          padding-top: 40rpx;
          justify-content: center;
          & .member-item{
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            position: relative;
            background: #fff6f6;
            border: 2px solid #fff;
            &>image{
              border-radius: 50%;
              overflow: hidden;
              width: 100%;
              height: 100%;
              position: absolute;
              z-index: 10;
              left: 0px;
              right: 0px;
              top: 0px;
              bottom: 0px;
            }
            & .group-role{
              background: #FF2424;
              color: #fff;
              font-size: 26rpx;
              height: 34rpx;
              display: block;
              width: 56rpx;
              text-align: center;
              line-height: 34rpx;
              padding: 0 14rpx;
              border-radius: 17rpx;
              position: absolute;
              z-index: 11;
              bottom: -10rpx;
              left: 50%;
              transform: translate(-50%);
            }
            &:last-child{
              position: relative;
              z-index: 10;
              margin-left: -20rpx;
            }
          }
        }
        & .member-full-title{
          text-align: center;
          font-size: 30rpx;
          font-weight: 600;
          margin-top: 40rpx;
          height: 88rpx;
          width: 345rpx;
          margin: 40rpx auto 0;
          padding-top: 12rpx;
          color: #FA5523;
          background-repeat: no-repeat center;
          background-position: center;
          background-size: cover;
        }
      }
      & .invite-tips{
        padding: 40rpx 85rpx 0;
        text-align: center;
        font-size: 28rpx;
        color: #666;
      }
      & .card-recive-cont{
        padding-top: 24rpx;
        & .price{
          color: #666;
        }
        & .recive-tips{
          text-align: center;
          padding-top: 20rpx;
          font-size: 28rpx;
          color: #666;
          & .link-card{
            display: inline-block;
            text-decoration: underline;
          }
        }
        & .recive-btn-cont{
          padding-top: 40rpx;
          & .go-index-btn{
            height: 90rpx;
            border-radius: 10rpx;
            color: #fff;
            line-height: 90rpx;
            font-size: 36rpx;
          }
        }
      }
    }
  }
  // 已购商品信息
  & .goods-info-cont{
    & .info-block-cont{
      margin-top: 20rpx;
      background: #fff;
      padding: 0 20rpx;
      & .info-item{
        font-size: 28rpx;
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & .item-title{
          color: #333;
          margin-right: 110rpx;
          flex-shrink: 0;
        }
        & .item-dec{
          justify-content: flex-end;
          display: flex;
          flex-grow: 1;
          color: #666;
          align-items: center;
          & .dec-info{
            width: 400rpx;
            text-align: right;
          }
          & .dec-icon{
            flex-shrink: 0;
            color: #999;
            margin-left: 10rpx;
            font-size: 36rpx;
          }
        }
      }
    }
  }
}
.rule-pup{
  & .rule-title{
    font-size: 36rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 22rpx;
  }
  & .rule-det{
    line-height: 1.5;
    text-align: left;
    color: #666;
    font-size: 28rpx;
  }
  & .rule-bottom-btn{
    display: block;
    font-size: 32rpx;
    color: #FF2424;
    text-align: center;
    width: 100%;
  }
}